<template>
  <component
    :is="getComponent(column)"
    v-bind:prop="column.fieldName"
    v-bind:showText="inputDisabled"
    v-bind="getOptions(column)"
    @change="changeValue(column)"
    :disabled="column.readonly === '1'"
  />
</template>

<script setup>
import { provide, inject, ref, toRef, watch } from 'vue';
import { useDisabled } from 'element-plus';

const emit = defineEmits(['change']);
const props = defineProps({
  index: Number,
  column: Object,
  single: {
    type: Boolean,
    default: () => false
  },
  data: Object
});
const formData = inject('formData', toRef(props.data));
if (props.single) {
  provide('formData', formData);
} else {
  provide('formData', toRef(formData.value.list[props.index]));
}
const inputDisabled = useDisabled();

const component = ref({
  '单行文本框': 'cc-input',
  '密码文本框': 'cc-password',
  '多行文本框': 'cc-textarea',
  '富文本框': 'cc-textarea',
  '单选框': 'cc-select',
  '多选框': 'cc-checkbox',
  '下拉框': 'cc-select',
  '多选下拉框': 'cc-selects',
  '开关': 'cc-switch',
  '字符': 'cc-input',
  '整数': 'cc-number',
  '小数': 'cc-number',
  '日期': 'cc-date',
  '时间': 'cc-datetime',
  '图片': 'cc-image',
  '视频': 'cc-video',
  '附件': 'cc-affix',
  '弹窗选择': 'cc-dialog-select',
  '下拉选择': 'cc-remote-select',
  '树形控件': 'cc-tree',
  '区划树': 'cc-region-tree',
  '单位树': 'cc-unit-tree',
  '企业树': 'cc-entp-tree',
  '部门树': 'cc-organization-tree',
  '人员树': 'cc-employee-tree',
  '字典树': 'cc-dict-tree',
  '字典开关': 'cc-dict-switch',
  '字典单选框': 'cc-dict-select',
  '字典下拉框': 'cc-dict-select',
  '单位多选': 'cc-units-tree',
  '企业多选': 'cc-entps-tree',
  '部门多选': 'cc-organizations-tree',
  '人员多选': 'cc-employees-tree',
  '角色多选': 'cc-roles',
});
const getComponent = (field) => {
  if (field.fieldType === '字符') {
    if (field.enumerate === '1') {
      return component.value[field.enumerateType];
    } else {
      return component.value[field.inputType];
    }
  } else if ("整数、小数、日期、时间、图片、视频、附件".indexOf(field.fieldType) >= 0) {
    return component.value[field.fieldType];
  } else if (field.fieldType === '联动') {
    if (field.relevanceType === '数据模型') {
      if (field.dialogPageId) {
        return component.value['弹窗选择'];
      } else {
        let relevanceList = field.dataField.relevanceList || [];
        if (relevanceList.length === 1 && !relevanceList[0].parentFieldId) {
          return component.value['下拉选择'];
        } else {
          return component.value['树形控件'];
        }
      }
    } else {
      return component.value[field.relevanceType];
    }
  } else if (field.fieldType === '大文本') {
    return component.value[field.inputType];
  }

  return 'cc-input';
};

const getOptions = (field) => {
  if (field.fieldType === '字符') {
    if (field.autoCreate === '1') {
      return { disabled: true, placeholder: '系统自动生成' };
    } else if (field.enumerate === '1') {
      return {options: field.enumerateValue || ''};
    } else {
      return {max: field.fieldSize || 100};
    }
  } else if ("整数、小数".indexOf(field.fieldType) >= 0) {
    return {
      point: "整数" === field.fieldType ? 0 : field.dataField.fieldPrecision || 0,
      max: field.maxValue, min: field.minValue
    };
  } else if ("日期".indexOf(field.fieldType) >= 0) {
    return {format: field.dataField.format || undefined, valueFormat: field.dataField.format || undefined};
  } else if (field.fieldType === '图片') {
    return {limit: 1, maxSize: field.dataField.imageMaxSize, width: 30, height: 30};
  } else if (field.fieldType === '视频') {
    return {mode: 'table', limit: 1, maxSize: field.dataField.imageMaxSize};
  } else if (field.fieldType === '联动') {
    let relevanceList = field.dataField.relevanceList || [];
    if (field.relevanceType === '数据模型' && relevanceList.length > 0) {
      if (field.dialogPageId && relevanceList.length > 0) {
        const relevance = relevanceList[relevanceList.length - 1];
        return {
          pageId: field.dialogPageId,
          dialogWidth: field.dialogWidth,
          dialogTitle: field.aliasName || field.fieldName,
          idProp: relevance.nodeFieldName,
          nameProp: relevance.showFieldName,
        };
      }

      if (relevanceList.length === 1 && !relevanceList[0].parentFieldId) {
        const queryList = [];
        if (relevanceList.length > 0 && relevanceList[0].filterFieldId && relevanceList[0].filterValueFieldId) {
          const field = props.fieldList.find(item => item.fieldId === relevanceList[0].filterValueFieldId);
          if (field && field.dataField) {
            queryList.push({
              filterFieldId: relevanceList[0].filterFieldId,
              dataFieldName: field.dataField.fieldName
            });
          }
        }

        return {
          dataModelId: relevanceList[0].dataModelId,
          filterName: relevanceList[0].showFieldId,
          idProp: relevanceList[0].nodeFieldId,
          nameProp: relevanceList[0].showFieldId,
          sortField: relevanceList[0].ordinalFieldId,
          queryList: queryList
        };
      } else {
        return {
          dataFieldId: field.fieldId,
          leafSelect: relevanceList.length > 1,
          typeSelect: relevanceList[relevanceList.length - 1].id
        };
      }
    } else {
      return {dictCode: field.relevanceDict || ''};
    }
  }

  return {};
};

const changeValue = (field) => {
  if (props.single) {
    emit('change', field, formData.value);
  } else {
    emit('change', field, formData.value.list[props.index]);
  }
};

watch(() => props.single, (single) => {
  if (single) {
    formData.value = props.data;
  }
}, {immediate: true});
</script>